import React from "react";
import BaseScreen from "../BaseScreen";
import styles from "../../css/my.module.css";
import ProgressView from "../../view/ProgressView";
import PressTouch from "../../view/PressTouch";
import * as locations from "../../const/locations";
import { myNav, AVATAR } from "../../const/imgs";
import { locationTo, locationReplace } from "../../utils/LocationUtil";
import { myBonus } from '../../service/MineService'
import Scroll from '../components/Bscroll/index'
import { clear, getID, getTOKEN } from "../../utils/StorageUtil";
import Config from "../../Config";
import { MyButton } from "../../view/MyButton";
import { HintDialog } from "../../view/Dialog";
import { imgTest } from '../../const/datas'
import UserInfo from '../components/UserInfo'

class MyBonus extends BaseScreen {
  constructor(props) {
    super(props);
    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 20;
    this.state = {
      isShowMore: false,
      bonusData: [],
      loading: false
    }
  }
  toLogin = () => {
    locationReplace(locations.LOGIN);
  };
  componentDidMount() {
    this.getmyBonus({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  getmyBonus = (params) => {
    const bonusData = params.isReFresh ? [] : this.state.bonusData
    this.setState({ loading: true })
    myBonus({
      token: getTOKEN(),
      ...params,
    })
      .then(
        res => {
          this.setState({ loading: false })
          if (res.error_code === 0) {
            this.setState({
              bonusData: [...bonusData, ...res.data.data]
            })
            this.CURRENT_PAGE++
          }
        }

      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  pullingUp = () => {
    const that = this
    this.getmyBonus({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  render() {
    const { isShowMore, bonusData, loading } = this.state
    return (
      <div className={styles["homes"]}>
        <Scroll
          ref='scroll'
          click={true}
          bounce={true}
          pullUpLoad={true}
          pullUpLoadMoreData={this.pullingUp}
          isPullUpTipHide={true}
          isShowMore={isShowMore}
        >
          <div className={styles.wrapper} style={bg}>
            <UserInfo user_info={this.state.user_info} />
            {bonusData.map((item, index) => {
              return (
                <BonusItem key={index} item={item} />
              )
            })}
          </div>
        </Scroll>
        <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} />
      </div>
    );
  }
}

const BonusItem = ({
  item: {
    commision_case_no, // 案件编号
    repay_amount,      // 还款金额
    received_rwd,      // 获得奖金
    time,              // 时间
  }
}) => {
  return (
    <div className={styles['bonus_item']}>
      <div className={styles['bonus_item_bottom']}>
        <div className={styles['bonus_item_line1']}>
          案件编号：{commision_case_no}
        </div>
        <div className={styles['bonus_item_line2']}>
          <div>
            <span style={{ marginRight: '5px' }} >
              回款：{repay_amount}元
            </span>
            <span>
              奖金：{received_rwd}元
            </span>
          </div>
          <div>
            {time}
          </div>
        </div>
      </div>
    </div>
  )
}
const styleBtn = {
  height: "2.75rem",
  lineHeight: "2.75rem",
  width: "73.6%",
  padding: 0,
  margin: "4.5rem auto 0"
};
let bg = {
  background: "url('" + myNav.BG + "') no-repeat",
  // background: Config.BaseColor,
  backgroundSize: "100% 280px"
};

const NAVIGATORS = [
  {
    id: 13,
    name: "日报管理",
    imgurl: imgTest[1].imgurl,
    path: locations.DAILY_M
  },
  {
    id: 14,
    name: "我的奖金",
    imgurl: imgTest[2].imgurl,
    path: locations.MY_BONUS
  },
  {
    id: 1,
    name: "催记管理",
    imgurl: imgTest[3].imgurl,
    path: locations.CUIJI_M
  },
];
const NAVIGATORLIST = [
  {
    id: 13,
    name: "常见问题",
    imgurl: myNav.HL,
    path: locations.HL
  },
  {
    id: 14,
    name: "关于我们",
    imgurl: myNav.US,
    path: locations.US
  },
  {
    id: 1,
    name: "客服",
    imgurl: myNav.BL,
    path: locations.KEFU
  },
  {
    id: 2,
    name: "设置",
    imgurl: myNav.SH,
    path: locations.SET
  },


];

export default MyBonus;
